<template>
    <view>
        <mescroll-uni
            ref="mescrollRef"
            @init="mescrollInit"
            :height="height"
            :down="downOption"
            @down="downRefresh"
            :up="upOption"
            @up="getData">
            <view class="wrapper">
                <view class="list" @click="goDetail(item)" v-for="(item, index) in datas">
                    <view class="title flex-between">
                        <view class="flex-sa-c">
                            <image v-if="item.SettlementType == 0" src="/pages_supplier/static/account1.png"></image>
                            <image v-else src="/pages_supplier/static/account2.png"></image>
                            {{ item.SettlementTypeName }}
                        </view>
                        <view class="state">{{ item.StateName }}</view>
                    </view>
                    <view class="price"
                        >结算金额：<view>￥{{ item.PriceSum }}</view>
                    </view>
                    <view class="time">发起时间：{{ item.AddTime }}</view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>
<script>
import orderItem from "@/pages_supplier/components/accountBuy/order-item.vue"
import { GetSettlementOrderList } from "@/pages_supplier/service/api/buyOrder.js"
export default {
    props: {
        height: {
            type: String,
            default: "100px",
        },
        requestData: {
            type: Object,
            default: {},
        },
        state: {
            type: Number,
            default: -1,
        },
    },
    components: {
        orderItem,
    },
    data() {
        return {
            datas: [],
            data: [],
            productList: [],
            param: {},
            downOption: {
                use: true,
            },
        }
    },
    mounted() {
        //#ifndef MP
        this.refresh(this.requestData)
        //#endif
        console.log(this.state)
    },
    methods: {
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageSize = page.size
            param.pageIndex = page.num
            param.state = this.state
            param.accountstate = this.requestData.accountstate
            GetSettlementOrderList(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                    console.log(this.datas)
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },

        goDetail(item) {
            this.easyGoTo("/pages_supplier/packet/accountBuy/detail?id=" + item.ID)
        },
        //刷新
        refresh(requestData) {
            this.downRefresh(requestData, true)
        },
        //刷新
        downRefresh(requestData, isSetParam = false) {
            this.datas = []
            if (isSetParam) {
                this.param = requestData
            }
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.wrapper {
    padding: 24rpx;
}

.list {
    margin-bottom: 16rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;

    .title {
        font-size: 28rpx;
        color: $color-gray-1;
        font-weight: bold;
        padding-bottom: 24rpx;

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .state {
            text-align: center;
            width: 108rpx;
            height: 44rpx;
            line-height: 44rpx;
            background: #f3f3f4;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: $color-gray-2;
            font-weight: normal;
        }
    }

    .price {
        display: flex;
        font-size: 30rpx;
        color: $color-gray-1;
        padding-bottom: 16rpx;

        view {
            font-weight: bold;
            color: #222a42;
            font-size: 36rpx;
        }
    }

    .time {
        font-size: 30rpx;
        color: $color-gray-3;
    }
}
</style>
